<template>
  <div class="wrapper">
    <el-row :gutter="10">
      <el-col :span="12" class="u_bg p_relative " style="overflow-y: auto;" :style="{height:clientHeight-10+'px'}">
        <div class="statistics_wapper">
          <div class="statistics_header">
            <label class="font18">工单实时统计</label>
          </div>
          <ul class="d-flex p_absolute" style="right: 10px;top:30px;">
            <li  v-for="index in 3" class="mr-3">
              <div class="d-inline-block ur-badge" :class="'badge'+index" style="height: 8px;vertical-align: middle;"></div>
              <label class="font12">{{global.WorkLevels[index-1]}}</label>
            </li>
          </ul>
          <div class="statistics_body">
            <!--今日 本月工单-->
            <div class="d-flex justify-content-around">
              <div class="workCount" v-for="(item,index) in workObj" :key="index">
                <label class="w-100 text-center">{{item.title}}</label>
                <div class="workCount_content">
                  <i class="iconfont icon-anquan txt_blue4 font36"></i>
                  <span>300</span>
                </div>
              </div>
            </div>
            <!--今日-->
            <el-row class="mt-3">
              <el-col :span="6" v-for="(item,index) in workStates" :key="index">
                <div class="todayCount mx-5 text-center w90" >
                  <h2 :class="clientWidth<1360?'font12':'font16'">{{item.title}}</h2>
                  <h3 class="txt_blue4">{{item.totalCount}}</h3>
                  <ul class="workType_group ">
                    <li class="mb-2 " v-for="index in 3">
                      <div class="d-inline-block ur-badge" :class="'badge'+index"></div>
                      <div class="d-inline-block count">20</div>
                    </li>
                  </ul>
                </div>
              </el-col>
            </el-row>
            <!--设备报警-->
            <div class="px-4">
              <el-table class="ur-table w-100 mt-4 ur-table-small no-border" ref="tableDom1" stripe :data="workByDevices" height="246">
                <el-table-column prop="area" label=""  align="center">
                  <template slot-scope="scope">
                    <div class="w120 text-center" style="border-radius: 4px;color: #fff" :style="{background:scope.$index%2==0?'#FF9500':'#0080FF'}">
                      {{scope.row.area}}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column class="txt_blue2"  label="控制器" align="center" width="80">
                  <template slot-scope="scope">
                    <span v-if="scope.$index%2==0" class="text-warning electronicFont font18">{{scope.row.control}}</span>
                    <span v-else class="txt_blue5 electronicFont font18">{{scope.row.control}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="集中器" align="center">
                  <template slot-scope="scope">
                    <span v-if="scope.$index%2==0" class="text-warning electronicFont font18">{{scope.row.ecc}}</span>
                    <span v-else class="txt_blue5 electronicFont font18">{{scope.row.ecc}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="pole" label="灯杆" align="center">
                  <template slot-scope="scope">
                    <span v-if="scope.$index%2==0" class="text-warning electronicFont font18">{{scope.row.pole}}</span>
                    <span v-else class="txt_blue5 electronicFont font18">{{scope.row.pole}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="lamp" label="灯源" align="center">
                  <template slot-scope="scope">
                    <span v-if="scope.$index%2==0" class="text-warning electronicFont font18">{{scope.row.lamp}}</span>
                    <span v-else class="txt_blue5 electronicFont font18">{{scope.row.lamp}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="count" label="工单总数" align="center" >
                  <template slot-scope="scope">
                    <span v-if="scope.$index%2==0" class="text-warning electronicFont font18">{{scope.row.count}}</span>
                    <span v-else class="txt_blue5 electronicFont font18">{{scope.row.count}}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <!--各区域工单完成及时率-->
        <div class="statistics_wapper u_bg p_relative">
          <div class="statistics_header">
            <label class="font18">各区域工单完成及时率</label>
          </div>
          <ul class="p_absolute " style="right: -20px;top:70px;width: 280px;">
            <li>
              <label class="mr-3 ml-2">完成率</label>
              <label class="mx-2">工单总数</label>
              <label class="mx-2">完成工单</label>
            </li>
          </ul>
          <div id="areaWork_wrap" class="d-flex pl-3 pr-5" style="line-height: 20px;" v-for="index in 8">
            <!--区域-->
            <div class="body_left" style="flex:none;width: 140px;">
              <div  class="area_group mb-3">
                <div class="bg_danger" v-if="[1,2,3].includes(index)">Top0{{index}}</div>
                <div class="bg_info" v-else>Top0{{index}}</div>
                <label class="mx-2">区域{{index}}</label>
              </div>
            </div>
            <!--区域 滑块-->
            <div class="body_main mx-4 pt-1" style="flex: 1">
              <div class="workProgress">
                <el-progress :color="[1,2,3].includes(index)?'#FF5866':'#0080FF'" :text-inside="true" :show-text="false" :stroke-width="12" :percentage="70"></el-progress>
              </div>
            </div>
            <!--区域工单完成数-->
            <div class="body_right text-right" style="flex: none;width: 230px;">
              <ul>
                <li>
                  <label class="mx-4" :class="textClass(index)">90%</label>
                  <label class="mx-4" :class="textClass(index)">90%</label>
                  <label class="mx-4" :class="textClass(index)">90%</label>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!--工单占比分析-->
        <div class="statistics_wapper u_bg mt-2">
          <div class="statistics_header">
            <label class="font18">工单占比分析</label>
          </div>
          <div class="workPie pl-5">
            <el-row :gutter="0">
              <el-col :span="12" class="d-flex justify-content-center align-items-center p_relative" style="top:-10px;">
                <div class="title d-inline-block mr-3 " style="width: 16px;">工区数量占比</div>
                <div class="d-inline-block " id="pie1" style="width: 300px;height: 174px;"></div>
              </el-col>
              <el-col :span="12" class="d-flex justify-content-center align-items-center p_relative" style="top:-10px;">
                <div class="title d-inline-block mr-3" style="width: 16px;">设备分类占比</div>
                <div class="d-inline-block " id="pie2" style="width: 350px;height: 174px;"></div>
              </el-col>
              <el-col :span="12" class="d-flex justify-content-center align-items-center p_relative" style="top:-5px;">
                <div class="title d-inline-block mr-3" style="width: 16px;">工单状态占比</div>
                <div class="d-inline-block pl-4" id="pie3" style="width: 300px;height: 174px;"></div>
              </el-col>
              <el-col :span="12" class="d-flex justify-content-center align-items-center p_relative" style="top:-5px;">
                <div class="title d-inline-block mr-3" style="width: 16px;">来源占比</div>
                <div class="title d-inline-block " id="pie4"  style="width: 350px;height: 174px;"></div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import chart from 'api/chart'
  import echarts from 'echarts'

  export default {
    components: {},
    props: {},
    data() {
      return {
        workObj:[
          {type:'day',title:'今日工单'},
          {type:'month',title:'本月工单'}
        ],
        workStates:[
          {title:'今日新增',totalCount:20,
            child:[{type:'1',count:20}, {type:'2',count:20}, {type:'3',count:20},]
          },
          {title:'今日待处理',totalCount:20,
            child:[{type:'1',count:20}, {type:'2',count:20}, {type:'3',count:20},]
          },
          {title:'今日处理中',totalCount:20,
            child:[{type:'1',count:20}, {type:'2',count:20}, {type:'3',count:20},]
          },
          {title:'今日已处理',totalCount:20,
            child:[{type:'1',count:20}, {type:'2',count:20}, {type:'3',count:20},]
          },
          {title:'本月新增',totalCount:20,
            child:[{type:'1',count:20}, {type:'2',count:20}, {type:'3',count:20},]
          },
          {title:'本月待处理',totalCount:20,
            child:[{type:'1',count:20}, {type:'2',count:20}, {type:'3',count:20},]
          },
          {title:'本月处理中',totalCount:20,
            child:[{type:'1',count:20}, {type:'2',count:20}, {type:'3',count:20},]
          },
          {title:'本月已处理',totalCount:20,
            child:[{type:'1',count:20}, {type:'2',count:20}, {type:'3',count:20},]
          },
        ],
        workByDevices:[
          {area:'区域1',control:200,ecc:200,pole:200,lamp:200,count:200},
          {area:'区域2',control:200,ecc:200,pole:200,lamp:200,count:200},
          {area:'区域3',control:200,ecc:200,pole:200,lamp:200,count:200},
          {area:'区域4',control:200,ecc:200,pole:200,lamp:200,count:200},
          {area:'区域5',control:200,ecc:200,pole:200,lamp:200,count:200},
        ],
        pieChart1:null,
        pieChart2:null,
        pieChart3:null,
        pieChart4:null,
      }
    },
    watch: {},
    computed: {
      ... mapState({
        clientHeight: state => state.comm.clientHeight,
        clientWidth: state => state.comm.clientWidth,
      })
    },
    methods: {
      textClass(index){
        if([1,2,3].includes(index)){
          return 'txt_danger'
        }else{
          return 'txt_blue5'
        }
      },
      pieChart(index){
        if(index==1){
          this.pieChart1=chart.pieChart('pie1')
          let arr=[]
          for(let i=0;i<8;i++){
            arr.push({value: parseInt(Math.random()*(100-10+1)-10,10), name: '区域'+(i+1)})
          }
          this.pieChart1.setOption({
            series: [{data:arr}]
          })
        }else if(index==2){
          this.pieChart2=chart.pieChart('pie2')
          let arr=[]
          let o=['集中器','控制器','灯杆','灯源']
          for(let i=0;i<o.length;i++){
            arr.push({value: parseInt(Math.random()*(100-10+1)-10,10), name: o[i]})
          }
          this.pieChart2.setOption({
            series: [{data:arr}]
          })
        }else if(index==3){
          this.pieChart3=chart.pieChart('pie3')
          let arr=[]
          let o=['已处理','待处理','处理中','返工']
          for(let i=0;i<o.length;i++){
            arr.push({value: parseInt(Math.random()*(100-10+1)-10,10), name: o[i]})
          }
          this.pieChart3.setOption({
            series: [{data:arr}]
          })
        }else{
          this.pieChart4=chart.pieChart('pie4')
          let arr=[]
          let o=['市民热线','系统报警','市民来电','巡修巡检']
          for(let i=0;i<o.length;i++){
            arr.push({value: parseInt(Math.random()*(100-10+1)-10,10), name: o[i]})
          }
          this.pieChart4.setOption({
            series: [{data:arr}]
          })
        }
      }
    },
    created() {
    },
    mounted() {
      for(let i=0;i<=4;i++){
        this.pieChart(i)
      }
    }
  }
</script>
<style  lang="stylus" rel="stylesheet/stylus">
  .statistics_header{
    width:500px;height:100px;line-height:60px;text-indent:10px;
    background:url("~static/image/comm/titleMark.png") no-repeat -40px -10px;
  }
  .workCount{
    label{font-size:22px;}
    .workCount_content{
      width:256px;height:68px;line-height 68px;text-indent:10px;margin-top:17px;
      background:url("~static/image/comm/workCount.png") no-repeat;
      span{display:inline-block;font-size:36px;font-family: 'electronicFont';color:#00D5FF;padding-left:20px;width: 180px;text-align: center;}
    }
  }
  .todayCount{
    margin-top:20px;
    h2{font-size:16px;font-weight:400;margin-bottom:10px;}
    h3{font-family: 'electronicFont';font-size:32px;margin-bottom:15px;}
    .workType_group{
      .count{font-family: 'electronicFont';font-size:18px;border: 1px solid #0080ff;width:64px;text-align:center;}
    }
  }
  .ur-badge{width:12px;height:20px;margin-right:2px;vertical-align:top;
    &.badge1{ background:#70E4AA;}
    &.badge2{ background:#ECF646}
    &.badge3{ background:#FF5866}
  }
  .ur-table-small.el-table tr:nth-child(event) td{
    background: rgba(5, 18, 57, 0.2) !important
  }
  .ur-table-small.el-table tr:nth-child(odd) td{
    background: rgba(0, 119, 255, 0.2)
  }
  #areaWork_wrap{
    .area_group>div{display:inline-block;width:56px;height 24px;line-height:24px;text-align:center;border-radius:4px;font-size:12px;}
  }
  .workPie{
    .title{
      width:50px;font-size:16px;line-height:26px;
    }
  }
</style>
